<%--
  Created by IntelliJ IDEA.
  User: 于永祥
  Date: 2022/9/29
  Time: 19:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>企业-发布职位</title>
</head>

<script type="text/javascript">
    $(function (){
        showCityByProvince();
        showDistrictByCity();
        showPositionTypeSecondByPositionType();
        $("#myform").submit(check);
        $(".province").change(showCityByProvince);
        $(".city").change(showDistrictByCity);
        $("#positionType").change(showPositionTypeSecondByPositionType);
        $(".position-name").blur(verifyPositionName);
        $("#salary-title").blur(verifySalary);
    });

    function check(){
        //获得在线编辑器中间的内容
        var info = editor.getContent().trim();
    }

    function verifySalary(){
        //薪资正则，可匹配纯数字1000，1w，1k三种情况
        let reg = /^[1-9][0-9]*[kwKW]{0,1}$/;
        if($("#salary-title").val()==""){
            $("#salary-title-tip").html("*非必填");
            $("#salary-title-tip").css("color","blue");
            return true;
        }
        else {
            if(!reg.test($("#salary-title").val())){
                $("#salary-title-tip").html("格式有误!");
                $("#salary-title-tip").css("color","red");
                return false;
            }
            else {
                $("#salary-title-tip").html("√");
                $("#salary-title-tip").css("color","blue");
                return true;
            }
        }
    }

    function verifyPositionName(){
        let reg = /^[\u4E00-\u9FA5]{2,50}$/;
        if($(".position-name").val()==""){
            $("#position-name-tips").html("*必填");
            $("#position-name-tips").css("color","red");
            return false;
        }
        else {
            if(!reg.test($(".position-name").val())){
                $("#position-name-tips").html("*格式有误!");
                $("#position-name-tips").css("color","red");
                return false;
            }
            else {
                $("#position-name-tips").html("√");
                $("#position-name-tips").css("color","blue");
                return true;
            }
        }
    }

    function showPositionTypeSecondByPositionType(){
        var positionTypeId = $("#positionType").val();
        $.ajax({
            url:"/web/getPositionTypeSecondByPositionTypeId",
            type:"post",
            dataType:"json",
            async:false,
            data:{
                positionTypeId:positionTypeId
            },
            success:function (mes){
                $("#positionTypeSecond").html("");
                for (var i=0;i<mes.length;i++){
                    $("#positionTypeSecond").append("<option value='"+mes[i].id+"'>"+mes[i].typeName+"</option>");
                }
            }
        });
    }

    function showDistrictByCity(){
        var cityId = $(".city").val();
        $.ajax({
            url:"/web/getDistrictByCity",
            type:"post",
            dataType: "json",
            async: false,
            data:{
                cityId:cityId
            },
            success:function (mes){
                $(".district").html("");
                for (var i=0;i<mes.length;i++){
                    $(".district").append("<option value='"+mes[i].id+"'>"+mes[i].districtName+"</option>");
                }
            }
        });
    }

    function showCityByProvince(){
        var provinceId = $(".province").val();
        $.ajax({
            url:"/web/getCityByProvince",
            type:"post",
            dataType:"json",
            async:false,
            data:{
                provinceId:provinceId
            },
            success:function (mes){
                $(".city").html("");
                for (var i=0;i<mes.length;i++){
                    $(".city").append("<option value='"+mes[i].cityId+"'>"+mes[i].cityName+"</option>");
                }
            }
        });
    }
</script>

<body style="background-color: var(--pxpMainColorLight);">
<div class="pxp-preloader"><span>Loading...</span></div>

<jsp:include page="/web/companies/inc/companyHead"/>

    <div class="pxp-dashboard-content-details">
        <h1>新职位</h1>
        <p class="pxp-text-light" style="font-weight: bold;">将新职位添加到公司的职位列表中</p>

        <form id="myform" method="post" action="/web/companies/saveOnePosition">
            <div class="row mt-4 mt-lg-5">
                <div class="col-xxl-6" style="width: 265px;">
                    <div class="mb-3">
                        <label for="pxp-company-job-title" class="form-label" style="font-weight: bold;">职位名称</label>
                        <span style="font-size: 12px;font-weight: bold;" id="position-name-tips"></span>
                        <input name="positionName" type="text" id="pxp-company-job-title" class="form-control position-name">
                    </div>
                </div>

                <div class="col-md-6 col-xxl-3" style="margin-left: 125px;">
                    <div class="mb-3">
                        <label for="positionType" class="form-label" style="font-weight: bold;">行业类别</label>
                        <select id="positionType" class="form-select">
                            <c:forEach items="${positionTypes}" var="positionType">
                                <option value="${positionType.id}">${positionType.typeName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 col-xxl-3" style="margin-left: 125px;">
                    <div class="mb-3">
                        <label for="positionTypeSecond" class="form-label" style="font-weight: bold;">职位类别</label>
                        <select id="positionTypeSecond" class="form-select" name="positionTypeSecondId">
                           <c:forEach items="${positionTypeSeconds}" var="positionTypeSecond">
                               <option value="${positionTypeSecond.id}">${positionTypeSecond.typeName}</option>
                           </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 col-xxl-3">
                    <div class="mb-3">
                        <label for="pxp-company-job-type" class="form-label" style="font-weight: bold;">职位性质</label>
                        <select id="pxp-company-job-type" class="form-select" name="fullTimeOn">
                            <option value="true">全职</option>
                            <option value="false">实习</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 col-xxl-3" style="margin-left: 123px;">
                    <div class="mb-3">
                        <label for="education" class="form-label" style="font-weight: bold;">学历要求</label>
                        <select id="education" class="form-select" name="educationId">
                            <c:forEach items="${educations}" var="education">
                                <option value="${education.id}">${education.educationName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 col-xxl-3" style="margin-left: 125px;">
                    <div class="mb-3">
                        <label for="pxp-company-job-experience" class="form-label" style="font-weight: bold;">工作经验</label>
                        <select id="pxp-company-job-experience" class="form-select" name="workExperienceTypeId">
                            <c:forEach items="${workExperienceTypes}" var="workExperienceType">
                                <option value="${workExperienceType.id}">${workExperienceType.workExperienceInfo}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <!--省份-->
                <div class="col-md-6 col-xxl-3">
                    <label for="company-job-province" class="form-label" style="font-weight: bold;">省份</label>
                    <select id="company-job-province" class="form-select province" name="provinceId">
                        <c:forEach items="${provinces}" var="province">
                            <option value="${province.provId}">${province.provName}</option>
                        </c:forEach>
                    </select>
                </div>
                <!--城市-->
                <div class="col-md-6 col-xxl-3" style="margin-left: 125px;">
                    <label for="company-job-city" class="form-label" style="font-weight: bold;">城市</label>
                    <select id="company-job-city" class="form-select city" name="cityId">

                    </select>
                </div>
                <!--行政区-->
                <div class="col-md-6 col-xxl-3" style="margin-left: 125px;">
                    <label for="company-job-district" class="form-label" style="font-weight: bold;">行政区</label>
                    <select id="company-job-district" class="form-select district" name="districtId">

                    </select>
                </div>
            </div>

            <div class="col-md-6 col-xxl-3" style="margin-left: 190px;margin-top: 50px;">
                <div class="mb-3">
                    <label for="salary" class="form-label" style="font-weight: bold;">薪资范围</label>
                    <select id="salary" class="form-select" name="salaryId">
                        <option value="0">面议</option>
                        <c:forEach items="${salarys}" var="salary">
                            <option value="${salary.id}">${salary.salaryInfo}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xxl-6" style="width: 230px;margin-left: 570px;margin-top: -100px;">
                <div class="mb-3">
                    <label for="salary-title" class="form-label" style="font-weight: bold;">薪资范围</label>
                    <span id="salary-title-tip" style="font-weight: bold;font-size: 12px;color: blue;">*非必填</span>
                    <input type="text" id="salary-title" class="form-control" name="salaryInfo">
                </div>
            </div>

            <div class="mt-4" style="width: 400px;margin-left: 65px;margin-bottom: 15px;">
                <span style="color: red;font-size:12px;font-weight: bold;" id="tec_msgs"></span>
                <div class="pxp-candidate-dashboard-skills mb-3">
                    <ul class="list-unstyled" id="exist_tecs">

                    </ul>
                </div>

                <label for="companyBenefits" class="form-label" style="font-weight: bold;">公司福利</label>
                <select style="width: 240px;" id="companyBenefits" class="form-select company-label">
                    <option selected disabled hidden>请选择公司福利</option>
                    <c:forEach items="${welfares}" var="welfare">
                        <option value="${welfare.id}">${welfare.welfareTab}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="mt-4" style="width: 400px;margin-left: 65px;margin-top: -140px;">
                <span style="color: red;font-size:12px;font-weight: bold;" id="tec_msg"></span>
                <div class="pxp-candidate-dashboard-skills mb-3">
                    <ul class="list-unstyled" id="exist_tec">

                    </ul>
                </div>

                <label for="positionLabel" class="form-label" style="font-weight: bold;">职位标签</label>
                <input type="radio" name="a" class="b" checked>
                <select style="width: 240px;" id="positionLabel" class="form-select position-label">
                    <option selected disabled hidden>请选择职位标签</option>
                    <c:forEach items="${introductionTabs}" var="introductionTab">
                        <option value="${introductionTab.id}">${introductionTab.introductionTabInfo}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="mb-3">
                <label for="info" class="form-label" style="font-weight: bold;">职位描述</label>
                <!-- 加载编辑器的容器 -->
                <script id="info" name="info" type="text/plain">职位描述</script>
                <!-- 配置文件 -->
                <script type="text/javascript" src="/static/ueditor-utf8/ueditor.config.js"></script>
                <!-- 编辑器源码文件 -->
                <script type="text/javascript" src="/static/ueditor-utf8/ueditor.all.js"></script>
                <!-- 实例化编辑器 -->
                <script type="text/javascript">
                    var editor;//在线编辑器对象
                    $(function (){
                        var items = {
                            initialFrameHeight:500,
                            toolbars:[['source','|','fontsize','|','fontfamily','|','forecolor','|','bold','|','italic','|','superscript','|','horizontal','|','selectall','|','justifyright','|','justifycenter','|','justifyjustify','|','justifyleft','|','undo']]
                        }
                        editor = UE.getEditor("info",items);
                    });
                </script>
            </div>

            <div class="mt-4 mt-lg-5">
                <button class="btn rounded-pill pxp-section-cta submitForm" type="button">立即发布</button>
<%--                <button class="btn rounded-pill pxp-section-cta">保存草稿</button>--%>
            </div>
        </form>
    </div>

<jsp:include page="/web/companies/inc/companyFoot"/>

</div>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/Chart.min.js"></script>
<script src="/static/web/js/main.js"></script>

<!--
<style type="text/css">
    .button{
        background-color:#b6d4fe;
    }
    .button:hover{
        background-color: #337ab7;
        color: white;
    }

    .buttons{
        background-color:#b6d4fe;
    }
    .buttons:hover{
        background-color: #337ab7;
        color: white;
    }
</style>
-->

<script>
    $(function (){
        init();
        $("#addTec").click(addPositionLabel);
        $("#exist_tec").on("click",".delTec",delTec);
        $(".position-label").change(addPositionLabels);
        $(".company-label").change(addCompanyLabels);
        $("#exist_tecs").on("click",".delTecs",delTecs);
        $(".submitForm").click(function (){
           $("#myform").submit();
        });
    });

    function init()
    {
        let success = "${param.success}";
        if (success!="")
        {
            alert("上传成功，请等待管理员审核");
        }
    }

    function delTecs(){
        if (confirm("确认要删除吗？")) {
            $(this).parent().remove();
        }
    }

    function addCompanyLabels(){
        let companyLabel = $(this).find('option:selected').text();
        let id = $(this).val();
        if($("#exist_tecs").find("li").length<5){
            let exist = 0;
            $("#exist_tecs").find("[class='companyLabel']").each(function (){
                if($(this).html() == companyLabel){
                    exist = 1;
                    return;
                }
            });
            if(exist == 0){
                $("#tec_msgs").html("添加成功!");
                $("#exist_tecs").append("<li><span class='companyLabel'>"+companyLabel+"</span><span class='fa fa-trash-o delTecs'></span></li>");
                $("#exist_tecs").append("<input type='hidden' name='existTecs' value='" + id + "'/>");
            }
            else {
                $("#tec_msgs").html("此标签已存在!");
            }
        }
        else {
            $("#tec_msgs").html("最多只能添加5个标签!");
        }
    }

    function addPositionLabels(){
        let positionLabel = $(this).find('option:selected').text();
        let id = $(this).val();
        if($("#exist_tec").find("li").length<5){
            let exist = 0;
            $("#exist_tec").find("[class='positionLabel']").each(function (){
                if($(this).html() == positionLabel){
                    exist = 1;
                    return;
                }
            });
            if(exist == 0){
                $("#tec_msg").html("添加成功!");
                $("#exist_tec").append("<li><span class='positionLabel'>"+positionLabel+"</span><span class='fa fa-trash-o delTec'></span></li>");
                $("#exist_tec").append("<input type='hidden' name='existTec' value='" + id + "'/>");
            }
            else {
                $("#tec_msg").html("此标签已存在!");
            }
        }
        else {
            $("#tec_msg").html("最多只能添加5个标签!");
        }
    }

    function delTec(){
        if (confirm("确认要删除吗？")) {
            $(this).parent().remove();
        }
    }

    function addPositionLabel(){
        let positionLabel = $("#tec").val();
        let verify = /^.{2,20}$/;
        if(positionLabel == ""){
            $("#tec_msg").html("*输入文字后添加");
            return false;
        }
        if(verify.test(positionLabel)){
            if($("#exist_tec").find("li").length<5){
                let exist = 0;
                $("#exist_tec").find("[class='positionLabel']").each(function (){
                    if($(this).html() == positionLabel){
                        exist = 1;
                        return;
                    }
                });
                if(exist == 0){
                    $("#tec_msg").html("添加成功!");
                    $("#tec").val("");
                    $("#exist_tec").append("<li><span class='positionLabel'>"+positionLabel+"</span><span class='fa fa-trash-o delTec'></span></li>");
                    $("#exist_tec").append("<input type='hidden' name='existTec' value='" + positionLabel + "'/>");
                }
                else {
                    $("#tec_msg").html("此标签已存在!");
                }
            }
            else {
                $("#tec_msg").html("最多只能添加5个标签!");
            }
        }
        else {
            $("#tec_msg").html("格式有误!");
        }
    }
</script>
</body>
</html>

